axios.defaults.baseURL = 'http://ajax-api.itheima.net'
//  获取元素
const list = document.querySelector('.top')
const reslist = async () => {
  const { data: res } = await axios({
    url: '/api/category/top',
    method: 'GET',
  })
  const newArr = res.data.map((item) => {
    return axios({
      url: '/api/category/sub?id=' + item.id,
      method: 'GET',
    })
  })
  const pn = await Promise.all(newArr)
  const html = pn
    .map(({ data: item }) => {
      console.log(item)
      return `
<li>
 <a href="javascript:;">${item.data.name}</a>
 <ul class="sub">
 ${item.data.children
   .map((item) => {
     return `
   <li>
   <a href="javascript:;">
     <span>${item.name}</span>
     <img src="${item.picture}" alt="">
   </a>
 </li>
   `
   })
   .join('')}
 </ul>
</li>
`
    })
    .join('')

  list.innerHTML = html
}
reslist()
